import { useState, useEffect, createContext, useContext } from 'react'
import { Tabs, Menu } from 'antd'

import MyItem from './child-category-my-item'
import '@/styles/main-content/child-category-my.css'

export const Context = createContext()

const ChildCategoryMy = () => {
  const [current, setCurrent] = useState('All')
  const [itemList, setItemList] = useState([])

  const tempList = [
    'All',
    'Animation',
    'Branding',
    'Illustration',
    'Mobile',
    'Print',
    'Product Design',
    'Typography',
    'Web Design',
  ]

  const handleClick = (e) => {
    console.log('click ', e)
    setCurrent({ current: e.key })
  }

  const initItems = () => {
    const temp = []
    for (let i = 0; i < tempList.length; i++) {
      temp.push(<MyItem key={tempList[i]}>{tempList[i]}</MyItem>)
    }
    setItemList(temp)
  }

  const initItemsNew = () => (
    <>
      <ul>
        {() => {
          const temp = []
          for (let i = 0; i < tempList.length; i++) {
            temp.push(
              <li>
                <MyItem key={tempList[i]}>{tempList[i]}</MyItem>
              </li>
            )
          }
          setItemList(temp)
        }}
      </ul>
    </>
  )

  useEffect(() => {
    initItems()
    // initItemsNew()
  }, [])

  return (
    <>
      <div className="my-style">
        <Context.Provider value={handleClick}>{itemList}</Context.Provider>
      </div>
    </>
  )
}

export default ChildCategoryMy
